<template>
  <div class="wrapper">
    <div class="head-wraper"> 
      <img alt="logo" src="../../static/head.png" class="logo" />
      <p class="phone" v-show="isLog === true"><span>{{name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{phone}}</span></p>
      <p class="phone" v-show="isLog === false">亲，你还没有登录/注册！</p>
    </div>
    <div class="btn-content" v-show="isLog === false">
      <router-link :to="{path: '/user/login'}">
        <mu-raised-button label="手机号登录" class="btn" secondary fullWidth/>
      </router-link>
      <br>
      <br>
      <br>
      <br> 
      <router-link :to="{path: '/user/register'}">
        <mu-raised-button label="注册" class="btn" secondary fullWidth/>
      </router-link>
    </div>
    <div class="user-content"  v-show="isLog === true">
      <mu-list class="user-list">
         <mu-divider inset/>
        <router-link :to="{path: '/user/collect-music'}">
          <mu-list-item title="我的收藏" >
            <mu-icon value="grade" slot="left" color="#CE3D3E"/>
          </mu-list-item>
        </router-link>
         <mu-divider inset/>
        <mu-list-item title="我的下载" >
          <mu-icon value="cloud_download"  slot="left" color="#CE3D3E"/>
        </mu-list-item>
        <mu-divider inset/>
         <mu-list-item title="退出登录" @click="open">
          <mu-icon  value="home"  slot="left" color="#CE3D3E"/>
        </mu-list-item>
        <mu-divider inset/>
      </mu-list>
      <mu-dialog :open="dialog" title="退出" @close="close">
        确定退出登录？
      <mu-flat-button slot="actions" @click="close" primary label="取消"/>
      <mu-flat-button slot="actions" primary @click="logout" label="确定"/>
  </mu-dialog>
    </div>
  </div>
</template>

<script>
  import Axios from 'axios'
  export default {
    data () {
      return {
        isLog: false,
        dialog: false,
        name: '',
        phone: ''
      }
    },
    beforeRouteEnter: (to, from, next) => {
      next(vm => {
        var uid = localStorage.getItem('uId')
        if (uid) {
          vm.getUserInfo(uid)
          vm.isLog = true
        }
      })
    },
    methods: {
      open () {
        this.dialog = true
      },
      close () {
        this.dialog = false
      },
      logout () {
        localStorage.removeItem('uId')
        this.isLog = false
        this.dialog = false
      },
      getUserInfo (uId) {
        var data = new FormData()
        data.append('uId', uId)
        var instance = Axios.create({
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'text/html, application/json, */*'
          }
        })
        instance.post('http://hongtaofans.cn/music/user/getuserinfo', data)
        .then((res) => {
          this.name = res.data.uName
          this.phone = res.data.phone
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped>
  .wrapper {
    width: 100%;
    height: 20rem;
    padding-top: 20px;
    /*background: url('http://img1.imgtn.bdimg.com/it/u=428296310,1455046193&fm=214&gp=0.jpg');*/
    background-size: cover;
  }

  .head-wraper {
    position: relative;
    width: 100%;
    height: 7rem;
    color: #fff;
    background-color: #CE3D3E;
  }

  .logo {
    position: absolute;
    width: 3.1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-65%);
    border: 1px solid #CE3D3E;
    border-radius: 50%;
  }

  .phone {
    position: absolute;
    bottom: 4%;
    left: 50%;
    font-size: .55rem;
    transform: translateX(-50%);
  }

  .user-content {

  }

  .btn-content {
    position: relative;
    margin-top: 70px;
  }

  .btn {
    position: absolute;
    width: 80%;
    height: 45px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
  }

</style>
